<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员卡列表</title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/vue/MD5.js"></script>
</head>
<body>
<!--我的会员卡-->
<div class="my_card" id="app">
    <div v-if="dateList.length>0">
        <div class="list" v-for="item in dateList" @click="details(item.id)">
            <div class="card">
                <div class="cd">
                    <div class="type">
                        <img v-if="item.Cardtype=='10'" src="images/card10.png" alt="">
                        <img v-else-if="item.Cardtype=='20'" src="images/card20.png" alt="">
                        <img v-else src="images/card30.png" alt="">
                    </div>
                    <div class="name">{{item.Cardname}}</div>
                    <div class="clear"></div>
                </div>
                <div class="h10"></div>
                <div>
                    <div class="l">状态</div>
                    <div class="r">
                        <span v-if="item.State=='0'" class="zc">正常</span>
                        <span v-else-if="item.State=='1'" class="zc">停用</span>
                        <span v-else-if="item.State=='2'" class="zc">转让</span>
                        <span v-else-if="item.State=='3'" class="zc">到期</span>
                        <span v-else class="zc">请假</span>
                    </div>
                    <div class="clear jj"></div>
                    <div class="l">余额</div><div class="r">{{item.Surplus}} {{item.Surplus_C}}</div>
                    <div class="clear jj"></div>
                    <div class="l">有效期</div><div class="r">{{item.Term}}</div>
                    <div class="clear jj"></div>
                    <div class="l">入场</div><div class="r c">入场签到计费{{item.SignCharge}} {{item.Surplus_C}}</div>
                    <div class="clear jj"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="notDate" v-else>
        <img src="images/notDate.jpg"/>
    </div>
    <div class="h10 mg"></div>
</div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        dateList:[]
    },
    created(){
        this.getCardList()
    },
    methods: {
        getCardList(){
            getVs()
            axios.get('/mobileapi/member/user_info.php?act=cardlist').then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        data=data.data
                        this.dateList=data.data
                        console.log(this.dateList)
                    }
                }).catch(function (error) { 
                    console.log(error); 
            });
        },
        details(id){
            window.location.href='my_cardDetails.html?cid='+id+''
        }
    }  
})    
</script>
</html>